<template>
	<view>
		<view class="inputWarp">
			<input type="text" placeholder="*请设置打卡标题 (例如: 坚持读书100天)" v-model:value="form.title">
		</view>
		<view class="inputWarp">
			<input type="number" placeholder="*请设置打卡积分数 (例如: 3)" v-model:value="form.integral">
		</view>
		<view class="inputWarp">
			<textarea name="" id="text" placeholder="*请设置打卡规则! (例如: 每日六点准时起床,不准迟到,不准早退!)" v-model:value="form.content"></textarea>
		</view>
		<view class="uPImg">
			<view class="Img">*上传照片 :</view>
			<!-- 上传图片 -->
			<view class="shangchuan">
			    <view class="sc2" v-for="(item, index) in form.imgList" :key="index">
			        <!-- <image class="del" @click="del(index)" src="https://longyugou.top:8008/small/add.png" mode=""></image> -->
			        <image class="Img3" :src="item" mode=""></image>
			    </view>
			    <view class="sc2" v-if="form.imgList.length < 1" @click="upload">
					<image class="sc3" src="https://longyugou.top:8008/small/add.png" mode=""></image>
				</view>
			</view>
			<view class="submitWarp">
				<button type="primary" @tap="submits">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { addPlan } from "@/api/index.js"
	export default {
		data() {
			return {
				temImgList: [],
				level: null,
				form: {
					title: '',
					integral: null,
					content: '',
					imgList: []
				}
			}
		},
		onLoad(data) {
			this.level = JSON.parse(decodeURIComponent(data.level));
			console.log(this.level,'level');
		},
		methods: {
			
			// 点击上传图片
					upload() {
						let that = this;
						uni.chooseImage({
							count: 3, //默认9
							sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
							sourceType: ['album'], //从相册选择
							loop: true,
							success: res => {
								console.log(res);
								if (res.tempFilePaths.length != 0) {
									this.form.imgList.push(res.tempFilePaths[0]);
								}
						 	// console.log(JSON.stringify(res.tempFilePaths));
								var tempFilePaths = res.tempFilePaths;
			 
								// console.log(tempFilePaths);
								// console.log(tempFilePaths[0]);
								uni.uploadFile({
									// url: 'http://localhost:9999/upload',
									url: 'https://longyugou.top/upload',
									filePath: tempFilePaths[0],
									name: 'file',
									success: uploadFileRes => {
										console.log('上传图片', JSON.parse(uploadFileRes.data).url);
										if (uploadFileRes) {
											that.temImgList.push(JSON.parse(uploadFileRes.data).url);
										}
									},
									fail(err) {
										console.log(err);
									}
								});
							}
						});
					},
			 
			      // 删除图片
					del(index) {
						this.form.imgList.splice(index, 1);
						console.log(this.form.imgList);
					},
					async submits(){
						if(this.form.title === '' || this.form.integral === null || this.form.content === '' || this.form.imgList.length < 1) {
							uni.showToast({
								title: "图片或输入框不能为空！"
							})
							return
						}
						console.log(this.temImgList,'this.temImgList');
						this.form.imgList = this.temImgList
						this.form.user = uni.getStorageSync("users")
						this.form.level = this.level
						console.log(this.form);
						let res = await addPlan(this.form)
						console.log(res.data.code === 1000,'resssssssssssss');
						if(res.data.code === 1000){
							uni.switchTab({
								url: "/pages/index/index"
							})
						}
					}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: aliceblue;
	}
.inputWarp {
	/* margin: 20rpx 0; */
	padding: 20rpx;
	background-color: #fff;
	border-bottom: 0.5px solid gainsboro;
}
uni-textarea {
	width: 100% !important;
}
.submitWarp {
	width: 100%;
	position: fixed;
	bottom: calc(var(--window-bottom) + 150rpx);
	z-index: 1000;
}
.shangchuan {
	width: 90%;
	height: 200rpx;
	margin: 0 auto;
	display: flex;
	align-items: center;
	.sc2 {
		width: 30%;
		height: 90%;
		border-radius: 10rpx;
		background-color: #dadfef;
		text-align: center;
		line-height: 240rpx;
		margin: 0 10rpx;
		position: relative;
		// background-color: #4CD964;
	}
	.Img3 {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}
	.del {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		z-index: 1000;
		top: 0rpx;
		right: 0;
	}
	.sc3 {
		width: 96rpx;
		height: 96rpx;
		border-radius: 10rpx;
	}
}
</style>
